<template>
  <div class="pick-color-component component-pick-color">
    <el-color-picker
      v-model="pickForm.color"
      color-format="rgba"
      :show-alpha="true"
      @change="handleChangeColor"
    />
    <span @click="handleReset">{{ $t(`pcdecorate.axinterval.reset`) }}</span>
    <span>{{ pickForm.color }}</span>
  </div>
</template>
<script setup>

const props = defineProps({
  defineColor: { // 选择的颜色
    type: String,
    default: () => ''
  },
  resetColor: { // 重置的颜色
    type: String,
    default: () => ''
  }
})
const emit = defineEmits(['handleChangeColor'])

const pickForm = {
  color: 'rgba(51, 51, 51, 1)'
}

watch(() => props.defineColor, (newVal) => {
  if (newVal) {
    pickForm.color = newVal
  }
}, {
  immediate: true,
  deep: true
})

// 当颜色改变
const handleChangeColor = () => {
  emit('handleChangeColor', pickForm.color)
}
const handleReset = () => {
  if (props.resetColor === '') {
    pickForm.color = 'rgba(51, 51, 51, 1)'
  } else {
    pickForm.color = props.resetColor
  }
  handleChangeColor()
}

</script>
<style lang="scss" scoped>
@use "index";
</style>
